<script setup lang="ts">
import list from "../../news/config";
import SectionTitleM from "~/components/SectionTitle.m.vue";
</script>

<template>
  <SectionTitleM title="品牌新闻" more="了解更多>" />

  <div class="mx-5">
    <a
      class="block relative rounded-2xl overflow-hidden mb-3"
      v-for="(item, index) in list.slice(0, 4)"
      :key="index"
      :href="`/news/${item.id}`"
    >
      <div class="leading-0">
        <img class="w-full" :src="item.cover" />
      </div>

      <div
        class="absolute bottom-0 left-0 w-full px-3 py-2 text-white bg-gradient-to-b from-black/0 to-black text-sm"
      >
        {{ item.title }}
      </div>
    </a>
  </div>
</template>
